<template>
  <div>
    <!-- 筛选器 -->
    <el-card class="filter-card">
      <el-radio-group v-model="selectedStatus" @change="handleFilterChange">
        <el-radio label="all">全部订单</el-radio>
        <el-radio label="unpaid">未付款</el-radio>
        <el-radio label="paid">已付款</el-radio>
        <el-radio label="shipping">配送中</el-radio>
        <el-radio label="completed">已送达</el-radio>
      </el-radio-group>
    </el-card>

    <!-- 表格显示区 -->
    <el-card class="table-card">
      <el-table :data="currentTableData" border style="width: 100%">
        <el-table-column prop="u_realname" label="网名" width="180"></el-table-column>
        <el-table-column prop="b_name" label="书名" width="180"></el-table-column>
        <el-table-column prop="b_cover" label="书籍封面" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.b_cover" style="width: 80px;height: 110px;">
          </template>
        </el-table-column>
        <el-table-column prop="bt_name" label="书籍类型" width="180"></el-table-column>
        <el-table-column prop="b_price" label="单价/元" width="180" :formatter="formatPrice"></el-table-column>
        <el-table-column prop="uo_number" label="数量" width="180"></el-table-column>
        <el-table-column prop="uo_price" label="总价/元" width="180" :formatter="formatPrice"></el-table-column>
        <el-table-column prop="pay_type" label="支付方式" width="180"></el-table-column>
        <el-table-column prop="uo_paymentstatus" label="支付状态" width="180"></el-table-column>
        <el-table-column prop="uo_state" label="货物状态" width="180"></el-table-column>
        <el-table-column prop="uo_time" label="下单时间" width="180"  :formatter="dataformatter"></el-table-column>
        <!-- 表格的操作栏 -->
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="small">完成</el-button>
            <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredTableData.length">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getUseOrderrList();
  },
  data() {
    return {
      searchQuery: '',
      selectedStatus:'all', // 默认为全部订单
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5,   // 每页显示条数
    };
  },
  computed: {
    filteredTableData() {
      let filteredData = this.tableData;
      // 根据搜索关键词过滤数据
      if (this.searchQuery) {
        filteredData = filteredData.filter(item => {
          return Object.values(item).some(val => val.toString().includes(this.searchQuery));
        });
      }

      // 根据订单状态过滤数据
      if (this.selectedStatus === 'all') {
        filteredData = filteredData.filter(item => item.uo_id); // 假设 uo_id 存在即为有效订单
      } else if (this.selectedStatus === 'unpaid') {
        filteredData = filteredData.filter(item => item.uo_paymentstatus === '未付款');
      } else if (this.selectedStatus === 'paid') {
        filteredData = filteredData.filter(item => item.uo_paymentstatus === '已付款');
      } else if (this.selectedStatus === 'shipping') {
        filteredData = filteredData.filter(item => item.uo_state === '配送中');
      }else if (this.selectedStatus === 'completed') {
        filteredData = filteredData.filter(item => item.uo_state === '已送达');
      }

      return filteredData;
    },
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredTableData.slice(start, end);
    }
  },
  methods: {
    formatPrice(row, column, cellValue) {
      return `${cellValue}元`;
    },
    dataformatter(row){
      if (row.uo_time){
        let date = new Date(row.uo_time);
        return  date.toLocaleString()
      }
    },
    // 获取用户数据
    async getUseOrderrList() {
      try {
        const { data: res } = await this.$axios.get("/userorder/listUserOrder");
        this.tableData = res.data;
      } catch (error) {
        console.error("获取用户数据失败", error);
      }
    },
    handleClick(val) {
      console.log('完成操作', val);
      // 在这里添加完成操作的处理逻辑
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await this.$axios.get("/userorder/deleteUserOrder", {params: {uo_id:row.uo_id}})
        if (res.data){
          this.$message.success('删除成功')
          await this.getUseOrderrList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleFilterChange() {
      this.currentPage = 1; // 重置到第一页
    }
  }
};
</script>

<style scoped>
.filter-card {
  margin-top: 10px; /* 调整这个值以减少卡片之间的间距 */
  padding: 20px;
}
.custom-card {
  margin-top: 40px; /* 调整这个值以减少卡片之间的间距 */
  padding: 20px;
}

.table-card {
  margin-top: 10px; /* 调整这个值以减少卡片之间的间距 */
  padding: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>